<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/base.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/style.css'/>">
    <link rel="stylesheet" type="text/css" href="<c:url value='/resource/wechat/css/global.css'/>">
    <script src="<c:url value='/resource/js/jquery-2.1.1.min.js'/>"></script>
    <script src="<c:url value='/resource/js/iscroll.js'/>"></script>
    <title>${title}</title>
    <style>
        #wrapper {
            position: absolute;
            z-index: 1;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            /*background: #ccc;*/
            overflow: hidden;
        }

        #scroller {
            position: absolute;
            z-index: 1;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            width: 100%;
            -webkit-transform: translateZ(0);
            -moz-transform: translateZ(0);
            -ms-transform: translateZ(0);
            -o-transform: translateZ(0);
            transform: translateZ(0);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            -webkit-text-size-adjust: none;
            -moz-text-size-adjust: none;
            -ms-text-size-adjust: none;
            -o-text-size-adjust: none;
            text-size-adjust: none;
        }

        #pullDown, #pullUp {
            margin: 0;
            padding: 0;
            height: 3rem;
            line-height: 3rem;
            width: 100%;
            border: none;
            text-align: center;
            -webkit-font-smoothing: antialiased;
            font-size: 0.95rem;
            color: #aba0a0;
        }

    </style>
</head>

<body>
<div id="wrapper">
    <div id="scroller" class="new_bottom">
        <div id="pullDown">
            <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
        </div>
        <ul id="news_list" class="new_ul"></ul>

        <div style="clear: both;"></div>
        <div id="pullUp"><a class="foot_icon" onclick="more()" href="#">加载更多</a></div>
    </div>
</div>
</body>

<script>
    var myScroll, _hasNext = true, _header, _headerOffset, _footer, _footerOffset, page_Index = 1;
    $(function () {
        shownews(1);
    });

    function more() {
        if (!_hasNext) {
            $(_footer).find("a").html("已加载全部");
            return;
        }
        shownews(page_Index + 1);
    }

    function shownews(pageIndex) {
        page_Index = pageIndex;
        $.ajax({
            url: "<c:url value='/api/news/${channel}/'/>" + page_Index,
            type: 'GET',
            dataType: 'json',
            timeout: 1000,
            beforeSend: function () {
                $("#loading").show();
                $("#error").hide();
            },
            success: function succFunction(resp) {
                console.info(resp);
                if (resp && resp.succ) {
                    var json = resp.data.list;
                    _hasNext = resp.hasNext;
                    $.each(json, function (index, item) {
                        var html = "";
                        var title = item.title;
                        var imgUrl = item.titlePic;
                        var summary = item.title;
                        var id = item.guid;
//                        var href = "/api/news/" + id;
                        html += "<li>" + "<a href=<c:url value='/api/goToNewDetail/${channel}/" + id + "'/>>";
                        <%--html += "<img src='<c:url value='"+imgUrl+"'/>'width='80' height='70'>" + " <span class='new_title_p'>" + title + "</span>";--%>

                        var imageUrl = imgUrl == null ?  '<c:url value="/resource/images/weixin/no_img.png"/>' : imgUrl;

                        html += "<img src="+ imageUrl +" width='80' height='70'>";
                        html+=  "<span class='new_title_p'>" + title + "</span>";
                        html += "<span class='new_title'>" + summary + "</span>" + "</a></li>";
                        $("#news_list").append(html);
                    });
                    $(_footer).find("a").html(_hasNext ? "加载更多" : "已加载全部");
                    if (myScroll != undefined) {
                        myScroll.refresh();
                    }

                } else {
                    _footer.className = '';
                    _footer.querySelector('.foot_icon').innerHTML = '无更多数据';
                }
            }
        });
    }

    function pullRefresh() {
        setTimeout(function () {
            $("#news_list").empty();
            shownews(1);
        }, 100);
    }

    function initPullRefresh() {
        _header = document.getElementById('pullDown');
        _headerOffset = _header ? _header.offsetHeight : 0;
        _footer = document.getElementById('pullUp');
        _footerOffset = _footer ? _footer.offsetHeight : 0;

        myScroll = new iScroll('wrapper', {
            useTransition: true,
            topOffset: _headerOffset,
            onRefresh: function () {
                if (_header && _header.className.match('loading')) {
                    _header.className = '';
                    _header.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                } else if (_footer && _footer.className.match('loading')) {
                    _footer.className = '';
                    _footer.querySelector('.foot_icon').innerHTML = '上拉加载更多';
                }
            }, onScrollMove: function () {
                if (_header && this.y > 5 && !_header.className.match('flip')) {
                    _header.className = 'flip';
                    _header.querySelector('.pullDownLabel').innerHTML = '松开刷新';
                    this.minScrollY = 0;
                } else if (_header && this.y < 5 && _header.className.match('flip')) {
                    _header.className = '';
                    _header.querySelector('.pullDownLabel').innerHTML = '下拉刷新';
                    this.minScrollY = -_headerOffset;
                }
            }, onScrollEnd: function () {
                if (_header && _header.className.match('flip')) {
                    _header.className = 'loading';
                    _header.querySelector('.pullDownLabel').innerHTML = '正在加载';
                    pullRefresh();
                }
            }
        });
    }

    document.addEventListener('touchmove', function (e) {
        e.preventDefault();
    }, false);
    document.addEventListener('DOMContentLoaded', function () {
        setTimeout(initPullRefresh, 200);
    }, false);


</script>